React์ experimental_useFormState ํ ์ ํ์ํ์ฌ ๊ฐ์ํ๋๊ณ ํจ์จ์ ์ธ ํผ ์ํ ๊ด๋ฆฌ๋ฅผ ๊ฒฝํํ์ธ์. ๋ณต์กํ ํผ์ ๋จ์ํํ๊ณ , ์ฑ๋ฅ์ ๊ฐ์ ํ๋ฉฐ, ๋น๋๊ธฐ ์์ ์ ํจ๊ณผ์ ์ผ๋ก ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
React experimental_useFormState: ํฅ์๋ ํผ ์ฒ๋ฆฌ๋ฅผ ์ํ ์ข ํฉ ๊ฐ์ด๋
๋์์์ด ์งํํ๋ React ์ํ๊ณ๋ ๊ฐ๋ฐ์ ๊ฒฝํ๊ณผ ์ ํ๋ฆฌ์ผ์ด์
์ฑ๋ฅ์ ํฅ์์ํค๊ธฐ ์ํ ํ์ ์ ์ธ ๋๊ตฌ๋ค์ ์ง์์ ์ผ๋ก ์ ๋ณด์ด๊ณ ์์ต๋๋ค. ๊ทธ ์ค ํ๋๊ฐ ๋ฐ๋ก experimental_useFormState Hook์
๋๋ค. ํ์ฌ ์คํ ๋จ๊ณ์ ์๋ ์ด ํ
์ ํนํ React Server Components ๋ฐ Actions์ ๊ฒฐํฉํ ๋, ํผ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ณ ๋น๋๊ธฐ ์์
์ ์ฒ๋ฆฌํ๋ ๊ฐ๋ ฅํ๊ณ ๊ฐ์ํ๋ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค. ์ด ๊ฐ์ด๋์์๋ experimental_useFormState์ ๋ณต์ก์ฑ์ ๊น์ด ํ๊ณ ๋ค์ด, ๊ทธ ์ด์ , ์ฌ์ฉ ์ฌ๋ก ๋ฐ ๊ตฌํ ์ ๋ต์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
experimental_useFormState๋ ๋ฌด์์ธ๊ฐ์?
experimental_useFormState Hook์ React ์ ํ๋ฆฌ์ผ์ด์
๋ด์์ ํผ ๊ด๋ฆฌ๋ฅผ ๋จ์ํํ๋๋ก ์ค๊ณ๋์์ต๋๋ค. ์ด ํ
์ ํผ ์ํ, ์ค๋ฅ ๋ฐ ๋น๋๊ธฐ ์ ์ถ์ ์ฒ๋ฆฌํ๋ ์ ์ธ์ ์ธ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค. ์๋ ์ํ ์
๋ฐ์ดํธ์ ๋ณต์กํ ์ด๋ฒคํธ ์ฒ๋ฆฌ๊ฐ ์์ฃผ ์๋ฐ๋๋ ๊ธฐ์กด ๋ฐฉ์๊ณผ ๋ฌ๋ฆฌ, experimental_useFormState๋ ์ ์ฒด ํผ ๋ผ์ดํ์ฌ์ดํด์ ๊ด๋ฆฌํ๋ ๋จ์ผ ํ
์ ์ ๊ณตํ์ฌ ์ด ํ๋ก์ธ์ค๋ฅผ ๊ฐ์ํํฉ๋๋ค.
๋ณธ์ง์ ์ผ๋ก experimental_useFormState๋ ํผ ์ ์ถ ๋ก์ง์ ์ํํ๋ ํจ์์ ์ํ ๊ฐ์ ์ฐ๊ฒฐํ ์ ์๋๋ก ํฉ๋๋ค. ์ด ํจ์๋ ์ผ๋ฐ์ ์ผ๋ก React Server Components ์ปจํ
์คํธ์์ ์๋ฒ ์ก์
์ผ๋ก, ๋ฐ์ดํฐ ์ ํจ์ฑ ๊ฒ์ฌ ๋ฐ ํ์ํ ๋ณ์ด๋ฅผ ์ํํ๋ ์ญํ ์ ํฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ํ
์ ์ด ํจ์์ ์คํ ์ํ๋ฅผ ๊ด๋ฆฌํ์ฌ ํผ ์ํ(์: ๋ก๋ฉ, ์ฑ๊ณต, ์ค๋ฅ)์ ๋ํ ํผ๋๋ฐฑ์ ์ฌ์ฉ์์๊ฒ ์ ๊ณตํฉ๋๋ค.
experimental_useFormState ์ฌ์ฉ์ ์ด์
- ๊ฐ์ํ๋ ํผ ๋ก์ง: ๋จ์ผ ํ ๋ด์์ ํผ ์ํ ๊ด๋ฆฌ๋ฅผ ์ค์ ์ง์คํํ์ฌ ๋ฐ๋ณต ์ฝ๋๋ฅผ ์ค์ ๋๋ค.
- ํฅ์๋ ์ฑ๋ฅ: ๋ถํ์ํ ์ ๋ฐ์ดํธ๋ฅผ ์ต์ํํ๊ณ ์๋ฒ ์ธก ๋ฐ์ดํฐ ๋ณ์ด๋ฅผ ํ์ฉํ์ฌ ๋ ๋๋ง์ ์ต์ ํํฉ๋๋ค.
- ์ ์ธ์ ์ ๊ทผ ๋ฐฉ์: ์ ์ธ์ ํ๋ก๊ทธ๋๋ฐ ์คํ์ผ์ ํตํด ๊ฐ๋ ์ฑ ์๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ด ์ฝ๋๋ฒ ์ด์ค๋ฅผ ์ด์งํฉ๋๋ค.
- ์๋ฒ ์ก์ ๊ณผ์ ์ํํ ํตํฉ: React Server Components ๋ฐ Actions์ ์ํํ๊ฒ ์๋ํ๋๋ก ์ค๊ณ๋์ด ํจ์จ์ ์ธ ๋ฐ์ดํฐ ๊ฐ์ ธ์ค๊ธฐ ๋ฐ ๋ณ์ด๋ฅผ ๊ฐ๋ฅํ๊ฒ ํฉ๋๋ค.
- ํฅ์๋ ์ฌ์ฉ์ ๊ฒฝํ: ํผ ์ํ์ ๋ํ ๋ช ํํ๊ณ ๊ฐ๊ฒฐํ ํผ๋๋ฐฑ์ ์ฌ์ฉ์์๊ฒ ์ ๊ณตํ์ฌ ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํฉ๋๋ค.
experimental_useFormState ์ฌ์ฉ ์ฌ๋ก
experimental_useFormState Hook์ ์๋ฒ ์ธก ์ ํจ์ฑ ๊ฒ์ฌ ๋ฐ ๋ฐ์ดํฐ ๋ณ์ด๊ฐ ํ์ํ ๋ณต์กํ ํผ์ ํฌํจํ๋ ์๋๋ฆฌ์ค์ ํนํ ์ ํฉํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์ผ๋ฐ์ ์ธ ์ฌ์ฉ ์ฌ๋ก์
๋๋ค:
- ์ธ์ฆ ํผ: ์ฌ์ฉ์ ๋ฑ๋ก, ๋ก๊ทธ์ธ ๋ฐ ๋น๋ฐ๋ฒํธ ์ฌ์ค์ ํผ ์ฒ๋ฆฌ.
- ์ ์์๊ฑฐ๋ ํผ: ๊ฒฐ์ ํผ ์ฒ๋ฆฌ, ์ฌ์ฉ์ ํ๋กํ ์ ๋ฐ์ดํธ ๋ฐ ์ ํ ๋ชฉ๋ก ๊ด๋ฆฌ.
- ์ฝํ ์ธ ๊ด๋ฆฌ ์์คํ (CMS): ๊ธฐ์ฌ ์์ฑ ๋ฐ ํธ์ง, ์ฌ์ฉ์ ์ญํ ๊ด๋ฆฌ ๋ฐ ์น์ฌ์ดํธ ์ค์ ๊ตฌ์ฑ.
- ์์ ๋ฏธ๋์ด ํ๋ซํผ: ์ ๋ฐ์ดํธ ๊ฒ์, ๋๊ธ ์ ์ถ ๋ฐ ์ฌ์ฉ์ ํ๋กํ ๊ด๋ฆฌ.
- ๋ฐ์ดํฐ ์ ๋ ฅ ํผ: ์ค๋ฌธ ์กฐ์ฌ, ํผ๋๋ฐฑ ํผ ๋ฐ ๊ณ ๊ฐ ์ ๋ณด์ ๊ฐ์ ๋ค์ํ ์์ค์์ ๋ฐ์ดํฐ ์บก์ฒ ๋ฐ ์ ํจ์ฑ ๊ฒ์ฌ.
๊ตฌํ ์์: ๊ฐ๋จํ ๋ฌธ์ ํผ
experimental_useFormState์ ์ฌ์ฉ๋ฒ์ ์ค์ ์์์ธ ๊ฐ๋จํ ๋ฌธ์ ํผ์ผ๋ก ์ค๋ช
ํ๊ฒ ์ต๋๋ค. ์ด ํผ์ ์ฌ์ฉ์์ ์ด๋ฆ, ์ด๋ฉ์ผ, ๋ฉ์์ง๋ฅผ ์์งํ ๋ค์ ์ฒ๋ฆฌ๋ฅผ ์ํด ์๋ฒ ์ก์
์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ถํฉ๋๋ค.
1. ์๋ฒ ์ก์ ์ ์
๋จผ์ , ํผ ์ ์ถ์ ์ฒ๋ฆฌํ๋ ์๋ฒ ์ก์ ์ ์ ์ํด์ผ ํฉ๋๋ค. ์ด ์ก์ ์ ๋ฐ์ดํฐ๋ฅผ ๊ฒ์ฆํ๊ณ ์ด๋ฉ์ผ ์๋ฆผ์ ๋ณด๋ ๋๋ค.
```javascript // app/actions.js 'use server'; import { revalidatePath } from 'next/cache'; import { sendEmail } from './utils/email'; // Example email sending function export async function submitContactForm(prevState, formData) { const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); // Basic validation if (!name || !email || !message) { return 'Please fill in all fields.'; } try { await sendEmail({ to: 'admin@example.com', // Replace with your admin email subject: 'New Contact Form Submission', text: `Name: ${name}\nEmail: ${email}\nMessage: ${message}`, }); revalidatePath('/'); // Revalidate the homepage or relevant path return 'Thank you for your message!'; } catch (error) { console.error('Error sending email:', error); return 'An error occurred. Please try again later.'; } } ```์ค๋ช :
'use server'์ง์๋ฌธ์ ์ด ํจ์๊ฐ ์๋ฒ์์ ์คํ๋์ด์ผ ํจ์ ๋ํ๋ ๋๋ค.- ์ด ํจ์๋ ์ด์ ์ํ(
prevState)์ ํผ ๋ฐ์ดํฐ(formData)๋ฅผ ์ธ์๋ก ๋ฐ์ต๋๋ค. - ํผ ๋ฐ์ดํฐ์์ ์ด๋ฆ, ์ด๋ฉ์ผ, ๋ฉ์์ง๋ฅผ ์ถ์ถํฉ๋๋ค.
- ๋ชจ๋ ํ์ ํ๋๊ฐ ์ฑ์์ ธ ์๋์ง ํ์ธํ๊ธฐ ์ํ ๊ธฐ๋ณธ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ํํฉ๋๋ค.
- ๋น๋๊ธฐ ํจ์
sendEmail(๋ณ๋๋ก ๊ตฌํํด์ผ ํจ)์ ์ฌ์ฉํ์ฌ ์ด๋ฉ์ผ ์๋ฆผ์ ๋ณด๋ ๋๋ค. ์ด๋ SendGrid, Mailgun ๋๋ AWS SES์ ๊ฐ์ ์๋น์ค๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. revalidatePath('/')๋ Next.js๊ฐ ํํ์ด์ง ๋ฐ์ดํฐ๋ฅผ ๋ค์ ๊ฐ์ ธ์ค๋๋ก ๊ฐ์ ํ์ฌ ๊ด๋ จ ๋ณ๊ฒฝ ์ฌํญ์ด ์ฆ์ ๋ฐ์๋๋๋ก ํฉ๋๋ค.- ์ฑ๊ณต ๋๋ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ๋ฐํํ์ฌ ํผ ์ํ๋ฅผ ์ ๋ฐ์ดํธํฉ๋๋ค.
2. React ์ปดํฌ๋ํธ ๊ตฌํ
์ด์ experimental_useFormState๋ฅผ ์ฌ์ฉํ์ฌ ํผ ์ํ๋ฅผ ๊ด๋ฆฌํ๊ณ ์ ์ถ์ ์ฒ๋ฆฌํ๋ React ์ปดํฌ๋ํธ๋ฅผ ์์ฑํด ๋ณด๊ฒ ์ต๋๋ค.
์ค๋ช :
'use client'์ง์๋ฌธ์ ์ด ์ปดํฌ๋ํธ๊ฐ ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ์์ ๋ํ๋ ๋๋ค.- ๊ฐ๊ฒฐ์ฑ์ ์ํด
experimental_useFormState๋ฅผuseFormState๋ก ๊ฐ์ ธ์ค๊ณsubmitContactForm์ก์ ๋ ๊ฐ์ ธ์ต๋๋ค. useFormState๋ฅผ ํธ์ถํ ๋submitContactForm์ก์ ๊ณผ ์ด๊ธฐ ์ํnull์ ์ ๋ฌํฉ๋๋ค.- ํ
์ ํ์ฌ ์ํ(
state)์ ํผ ์ ์ถ์ ํธ๋ฆฌ๊ฑฐํ๋ ํจ์(formAction)๋ฅผ ๋ฐํํฉ๋๋ค. formActionํจ์๋ฅผform์์์actionprop์ ์ฐ๊ฒฐํฉ๋๋ค. ์ด๋ React๊ฐ ํผ ์ ์ถ์ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ๋ ๋ฐ ์ค์ํฉ๋๋ค.- ํผ์๋ ์ด๋ฆ, ์ด๋ฉ์ผ, ๋ฉ์์ง ์ ๋ ฅ ํ๋์ ์ ์ถ ๋ฒํผ์ด ํฌํจ๋ฉ๋๋ค.
{state && <p>{state}</p>}๋ผ์ธ์ ์ฌ์ฉ์์๊ฒ ํ์ฌ ์ํ(์ฑ๊ณต ๋๋ ์ค๋ฅ ๋ฉ์์ง)๋ฅผ ํ์ํฉ๋๋ค.
3. ์ด๋ฉ์ผ ์ ์ก ์๋น์ค ์ค์ (sendEmail ์์)
sendEmail ํจ์๋ฅผ ๊ตฌํํด์ผ ํฉ๋๋ค. ๋ค์์ Gmail ๊ณ์ ์ผ๋ก Nodemailer๋ฅผ ์ฌ์ฉํ๋ ์์์
๋๋ค (์ฐธ๊ณ : ํ๋ก๋์
ํ๊ฒฝ์์ Gmail์ ์ง์ ์ฌ์ฉํ๋ ๊ฒ์ ์ผ๋ฐ์ ์ผ๋ก ๊ถ์ฅ๋์ง ์์ต๋๋ค. ํ๋ก๋์
ํ๊ฒฝ์์๋ SendGrid, Mailgun ๋๋ AWS SES์ ๊ฐ์ ์ ์ฉ ์ด๋ฉ์ผ ์๋น์ค๋ฅผ ์ฌ์ฉํ์ธ์).
์ค์ ๋ณด์ ์ฐธ๊ณ : ์ค์ Gmail ๋น๋ฐ๋ฒํธ๋ฅผ ์ฝ๋๋ฒ ์ด์ค์ ์ง์ ์ปค๋ฐํ์ง ๋ง์ธ์! ๋ฏผ๊ฐํ ์ ๋ณด๋ ํ๊ฒฝ ๋ณ์๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ฅํ์ธ์. ํ๋ก๋์ ์ฌ์ฉ์ ์ํด Nodemailer ์ ์ฉ ์ฑ ๋น๋ฐ๋ฒํธ๋ฅผ ์์ฑํ๊ณ ์ฃผ Gmail ๋น๋ฐ๋ฒํธ๋ฅผ ์ฌ์ฉํ์ง ๋ง์ธ์. ์ ์ฉ ์ด๋ฉ์ผ ์ ์ก ์๋น์ค๋ Gmail์ ์ง์ ์ฌ์ฉํ๋ ๊ฒ๋ณด๋ค ๋ ๋์ ์ ๋ฌ๋ ฅ๊ณผ ๋ณด์์ ์ ๊ณตํฉ๋๋ค.
4. ์์ ์คํ
ํ์ํ ์ข ์์ฑ์ด ์ค์น๋์ด ์๋์ง ํ์ธํ์ธ์:
```bash npm install nodemailer ```๋๋
```bash yarn add nodemailer ```๊ทธ๋ฐ ๋ค์, Next.js ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์คํํ์ธ์:
```bash npm run dev ```๋๋
```bash yarn dev ```๋ธ๋ผ์ฐ์ ๋ฅผ ์ด๊ณ ContactForm ์ปดํฌ๋ํธ๊ฐ ํฌํจ๋ ํ์ด์ง๋ก ์ด๋ํ์ธ์. ํผ์ ์์ฑํ๊ณ ์ ์ถํ์ธ์. ํผ ์๋์ ์ฑ๊ณต ๋ฉ์์ง ๋๋ ์ค๋ฅ ๋ฉ์์ง๊ฐ ํ์๋์ด์ผ ํฉ๋๋ค. ์ด๋ฉ์ผ ๋ฐ์ ํธ์งํจ์ ํ์ธํ์ฌ ์ด๋ฉ์ผ์ด ์ฑ๊ณต์ ์ผ๋ก ์ ์ก๋์๋์ง ํ์ธํ์ธ์.
๊ณ ๊ธ ์ฌ์ฉ๋ฒ ๋ฐ ๊ณ ๋ ค ์ฌํญ
1. ๋ก๋ฉ ์ํ ์ฒ๋ฆฌ
๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๊ธฐ ์ํด ํผ์ด ์ ์ถ ์ค์ผ ๋ ์ด๋ฅผ ํ์ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. experimental_useFormState๋ ๋ก๋ฉ ์ํ๋ฅผ ์ง์ ๋
ธ์ถํ์ง ์์ง๋ง, React์ useTransition ํ
์ formAction๊ณผ ํจ๊ป ์ฌ์ฉํ์ฌ ์๋์ผ๋ก ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
์ด ์์์์๋:
- 'react'์์
useTransition์ ๊ฐ์ ธ์ต๋๋ค. useTransition์ ํธ์ถํ์ฌisPending์ํ์startTransitionํจ์๋ฅผ ๊ฐ์ ธ์ต๋๋ค.formActionํธ์ถ์startTransition๋ด๋ถ์ ๋ํํฉ๋๋ค. ์ด๋ React์๊ฒ ํผ ์ ์ถ์ ์ ํ์ผ๋ก ์ฒ๋ฆฌํ์ฌ ํ์ํ ๊ฒฝ์ฐ ์ค๋จ๋ ์ ์๋๋ก ํฉ๋๋ค.isPending์ด true์ธ ๋์ ์ ์ถ ๋ฒํผ์ ๋นํ์ฑํํ๊ณ ๋ฒํผ ํ ์คํธ๋ฅผ "์ ์ถ ์ค..."์ผ๋ก ๋ณ๊ฒฝํฉ๋๋ค.
2. ์ค๋ฅ ์ฒ๋ฆฌ ๋ฐ ์ ํจ์ฑ ๊ฒ์ฌ
๊ฒฌ๊ณ ํ ์ค๋ฅ ์ฒ๋ฆฌ๋ ์ข์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ์๋ฒ ์ก์ ์ ์ฒ ์ ํ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ํํ๊ณ ํด๋ผ์ด์ธํธ์ ์ ์ฉํ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ๋ฐํํด์ผ ํฉ๋๋ค. ๊ทธ๋ฌ๋ฉด ํด๋ผ์ด์ธํธ ์ปดํฌ๋ํธ๋ ์ด๋ฌํ ๋ฉ์์ง๋ฅผ ์ฌ์ฉ์์๊ฒ ํ์ํ ์ ์์ต๋๋ค.
์๋ฒ ์ธก ์ ํจ์ฑ ๊ฒ์ฌ: ์ ์์ ์ธ ์ ๋ ฅ์ ๋ฐฉ์งํ๊ณ ๋ฐ์ดํฐ ๋ฌด๊ฒฐ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ํญ์ ์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ ๊ฒ์ฆํด์ผ ํฉ๋๋ค. ์คํค๋ง ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ํด Zod ๋๋ Yup๊ณผ ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ธ์.
ํด๋ผ์ด์ธํธ ์ธก ์ ํจ์ฑ ๊ฒ์ฌ (์ ํ ์ฌํญ): ์๋ฒ ์ธก ์ ํจ์ฑ ๊ฒ์ฌ๊ฐ ํ์์ ์ด์ง๋ง, ํด๋ผ์ด์ธํธ ์ธก ์ ํจ์ฑ ๊ฒ์ฌ๋ ์ฌ์ฉ์์๊ฒ ์ฆ๊ฐ์ ์ธ ํผ๋๋ฐฑ์ ์ ๊ณตํ๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ํด๋ผ์ด์ธํธ ์ธก ์ ํจ์ฑ ๊ฒ์ฌ๋ ๊ฒฐ์ฝ ์ ์ผํ ์ง์ค์ ์์ฒ์ผ๋ก ์์กดํด์๋ ์ ๋ฉ๋๋ค.
3. ๋๊ด์ ์ ๋ฐ์ดํธ
๋๊ด์ ์ ๋ฐ์ดํธ๋ ์๋ฒ๊ฐ ํ์ธํ๊ธฐ ์ ์๋ ํผ ์ ์ถ์ด ์ฑ๊ณตํ ๊ฒ์ฒ๋ผ UI๋ฅผ ์ฆ์ ์ ๋ฐ์ดํธํ์ฌ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ฐ์์ฑ์ ๋์ผ ์ ์์ต๋๋ค. ํ์ง๋ง ์ ์ถ์ด ์คํจํ ๊ฒฝ์ฐ ์ค๋ฅ๋ฅผ ์ฒ๋ฆฌํ๊ณ ๋ณ๊ฒฝ ์ฌํญ์ ๋๋๋ฆด ์ค๋น๊ฐ ๋์ด ์์ด์ผ ํฉ๋๋ค.
experimental_useFormState๋ฅผ ์ฌ์ฉํ๋ฉด formAction์ ํธ์ถํ๊ธฐ ์ ์ ํผ ๋ฐ์ดํฐ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ก์ปฌ ์ํ๋ฅผ ์
๋ฐ์ดํธํ์ฌ ๋๊ด์ ์
๋ฐ์ดํธ๋ฅผ ๊ตฌํํ ์ ์์ต๋๋ค. ์๋ฒ ์ก์
์ด ์คํจํ๋ฉด ํ
์ด ๋ฐํํ๋ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ณ๊ฒฝ ์ฌํญ์ ๋๋๋ฆด ์ ์์ต๋๋ค.
4. ์ฌ๊ฒ์ฆ ๋ฐ ์บ์ฑ
React Server Components ๋ฐ Actions๋ ์บ์ฑ์ ํ์ฉํ์ฌ ์ฑ๋ฅ์ ํฅ์์ํต๋๋ค. ํผ ์ ์ถ์ด ๋ฐ์ดํฐ๋ฅผ ์์ ํ ๋, UI๊ฐ ์ต์ ๋ณ๊ฒฝ ์ฌํญ์ ๋ฐ์ํ๋๋ก ์บ์๋ฅผ ์ฌ๊ฒ์ฆํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
next/cache์ revalidatePath ๋ฐ revalidateTag ํจ์๋ ์บ์์ ํน์ ๋ถ๋ถ์ ๋ฌดํจํํ๋ ๋ฐ ์ฌ์ฉ๋ ์ ์์ต๋๋ค. submitContactForm ์์์์๋ revalidatePath('/')๊ฐ ์ฑ๊ณต์ ์ธ ํผ ์ ์ถ ํ ํํ์ด์ง๋ฅผ ์ฌ๊ฒ์ฆํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
5. ๊ตญ์ ํ (i18n)
๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ ๋ ๊ตญ์ ํ(i18n)๋ ๋งค์ฐ ์ค์ํฉ๋๋ค. ์ด๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ค์ํ ์ธ์ด, ์ง์ญ ๋ฐ ๋ฌธํ์ ์ ํธ๋์ ๋ง๊ฒ ์กฐ์ ํ๋ ๊ฒ์ ํฌํจํฉ๋๋ค.
ํผ์ ๊ฒฝ์ฐ, ์ด๋ ์ง์ญํ๋ ๋ ์ด๋ธ, ์ค๋ฅ ๋ฉ์์ง ๋ฐ ์ ํจ์ฑ ๊ฒ์ฌ ๊ท์น์ ์ ๊ณตํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค. next-intl ๋๋ react-i18next์ ๊ฐ์ i18n ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ฒ์ญ์ ๊ด๋ฆฌํ๊ณ ์ฌ์ฉ์ ๋ก์ผ์ผ์ ๋ฐ๋ผ ๋ฐ์ดํฐ๋ฅผ ํฌ๋งทํ์ธ์.
next-intl์ ์ฌ์ฉํ ์์:
6. ์ ๊ทผ์ฑ (a11y)
์ ๊ทผ์ฑ์ ์ฅ์ ์ธ์ ํฌํจํ ๋ชจ๋ ์ฌ๋์ด ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฌ์ฉํ ์ ์๋๋ก ํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ํผ์ ๊ตฌ์ถํ ๋ ๋ค์ ์ ๊ทผ์ฑ ์ง์นจ์ ๊ณ ๋ คํ์ธ์:
- ์๋ฏธ๋ก ์ HTML ์ฌ์ฉ:
<label>,<input>,<textarea>์ ๊ฐ์ ์ ์ ํ HTML ์์๋ฅผ ์ฌ์ฉํ์ฌ ํผ์ ๊ตฌ์กฐ์ ์๋ฏธ๋ฅผ ๋ถ์ฌํ์ธ์. - ๋ชจ๋ ํผ ํ๋์ ๋ ์ด๋ธ ์ ๊ณต:
<label>์์์for์์ฑ๊ณผ ํผ ํ๋์id์์ฑ์ ์ฌ์ฉํ์ฌ ๋ ์ด๋ธ์ ํผ ํ๋์ ์ฐ๊ฒฐํ์ธ์. - ARIA ์์ฑ ์ฌ์ฉ: ARIA ์์ฑ์ ์ฌ์ฉํ์ฌ ๋ณด์กฐ ๊ธฐ์ ์ ํผ์ ๊ตฌ์กฐ ๋ฐ ๋์์ ๋ํ ์ถ๊ฐ ์ ๋ณด๋ฅผ ์ ๊ณตํ์ธ์.
- ์ถฉ๋ถํ ์์ ๋๋น ๋ณด์ฅ: ์๊ฐ ์ฅ์ ๊ฐ ์๋ ์ฌ๋๋ค์ ๊ฐ๋ ์ฑ์ ๋ณด์ฅํ๊ธฐ ์ํด ํ ์คํธ์ ๋ฐฐ๊ฒฝ์ ์ฌ์ด์ ์ถฉ๋ถํ ์์ ๋๋น๋ฅผ ์ฌ์ฉํ์ธ์.
- ํค๋ณด๋ ํ์ ์ ๊ณต: ์ฌ์ฉ์๊ฐ ํค๋ณด๋๋ง์ผ๋ก ํผ์ ํ์ํ ์ ์๋๋ก ๋ณด์ฅํ์ธ์.
- ๋ณด์กฐ ๊ธฐ์ ๋ก ํ ์คํธ: ํ๋ฉด ์ฝ๊ธฐ ํ๋ก๊ทธ๋จ๊ณผ ๊ฐ์ ๋ณด์กฐ ๊ธฐ์ ๋ก ํผ์ ํ ์คํธํ์ฌ ์ฅ์ ๊ฐ ์๋ ์ฌ๋๋ค๋ ์ ๊ทผํ ์ ์๋๋ก ๋ณด์ฅํ์ธ์.
๊ธ๋ก๋ฒ ๊ณ ๋ ค ์ฌํญ ๋ฐ ๋ชจ๋ฒ ์ฌ๋ก
1. ์๊ฐ๋
ํผ์์ ๋ ์ง์ ์๊ฐ์ ๋ค๋ฃฐ ๋๋ ์๊ฐ๋๋ฅผ ๊ณ ๋ คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ์๋ฒ์์๋ ๋ ์ง์ ์๊ฐ์ UTC ํ์์ผ๋ก ์ ์ฅํ๊ณ , ํด๋ผ์ด์ธํธ์์๋ ์ฌ์ฉ์ ์ง์ญ ์๊ฐ๋๋ก ๋ณํํ์ธ์.
2. ํตํ
ํผ์์ ํตํ ๊ฐ์ ๋ค๋ฃฐ ๋๋ ํตํ๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ฒ๋ฆฌํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ํตํ ํ์ ์ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์ ๋ก์ผ์ผ์ ๋ฐ๋ผ ๊ฐ์ ํฌ๋งทํ๊ณ ์ ์ ํ ํตํ ๊ธฐํธ๋ฅผ ํ์ํ์ธ์.
3. ์ฃผ์
์ฃผ์ ํ์์ ๊ตญ๊ฐ๋ง๋ค ํฌ๊ฒ ๋ค๋ฆ ๋๋ค. ์ฌ์ฉ์๊ฐ ์ฃผ์๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ ๋ ฅํ ์ ์๋๋ก ๊ตญ์ ์ฃผ์ ํ์์ ์ง์ํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ธ์.
4. ์ ํ๋ฒํธ
์ ํ๋ฒํธ ํ์ ๋ํ ๊ตญ๊ฐ๋ง๋ค ๋ค๋ฆ ๋๋ค. ์ ํ๋ฒํธ ํ์ ์ง์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ์ฉ์ ๋ก์ผ์ผ์ ๋ฐ๋ผ ์ ํ๋ฒํธ๋ฅผ ํฌ๋งทํ๊ณ ์ ํจํ ์ ํ๋ฒํธ์ธ์ง ๊ฒ์ฆํ์ธ์.
5. ๋ฐ์ดํฐ ํ๋ผ์ด๋ฒ์ ๋ฐ ๊ท์ ์ค์
ํผ ๋ฐ์ดํฐ๋ฅผ ์์งํ๊ณ ์ฒ๋ฆฌํ ๋๋ GDPR ๋ฐ CCPA์ ๊ฐ์ ๋ฐ์ดํฐ ํ๋ผ์ด๋ฒ์ ๊ท์ ์ ์ผ๋์ ๋์ธ์. ๋ฐ์ดํฐ๋ฅผ ์์งํ๊ธฐ ์ ์ ์ฌ์ฉ์๋ก๋ถํฐ ๋์๋ฅผ ์ป๊ณ , ๋ฐ์ดํฐ์ ์ก์ธ์ค, ์์ ๋ฐ ์ญ์ ํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ๊ณตํ์ธ์.
๊ฒฐ๋ก
experimental_useFormState Hook์ React ์ ํ๋ฆฌ์ผ์ด์
์์ ํผ ๊ด๋ฆฌ๋ฅผ ๋จ์ํํ๋ ์ ๋งํ ์ ๊ทผ ๋ฐฉ์์ ์ ๊ณตํฉ๋๋ค. ์๋ฒ ์ก์
์ ํ์ฉํ๊ณ ์ ์ธ์ ์คํ์ผ์ ์์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ ๋์ฑ ํจ์จ์ ์ด๊ณ ์ ์ง๋ณด์ํ๊ธฐ ์ฌ์ฐ๋ฉฐ ์ฌ์ฉ์ ์นํ์ ์ธ ํผ์ ๊ตฌ์ถํ ์ ์์ต๋๋ค. ์์ง ์คํ ๋จ๊ณ์ ์์ง๋ง, experimental_useFormState๋ ํผ ์ํฌํ๋ก๋ฅผ ๊ฐ์ํํ๊ณ ์ ๋ฐ์ ์ธ React ๊ฐ๋ฐ ๊ฒฝํ์ ํฅ์์ํค๋ ๋ฐ ์๋นํ ์ ์ฌ๋ ฅ์ ๊ฐ์ง๊ณ ์์ต๋๋ค. ์ด ๊ฐ์ด๋์ ์ค๋ช
๋ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ฉด experimental_useFormState์ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ์ฌ ์ ํ๋ฆฌ์ผ์ด์
์ ์ํ ๊ฒฌ๊ณ ํ๊ณ ํ์ฅ ๊ฐ๋ฅํ ํผ ์๋ฃจ์
์ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
API๊ฐ ์คํ ๋จ๊ณ์์ ์์ ๋จ๊ณ๋ก ์งํํจ์ ๋ฐ๋ผ ํญ์ ์ต์ React ๋ฌธ์ ๋ฐ ์ปค๋ฎค๋ํฐ ํ ๋ก ์ ํ์ธํ์ธ์.